/* eslint-disable no-plusplus */
import React, { Component } from 'react';
import { Form, Row, Col, Input, Button, Checkbox, DatePicker } from 'antd';
import moment from 'moment';
import styles from '../../../index.less';
import * as commonFunc from '../../Common/commonFunc';

const { RangePicker } = DatePicker;

const FormItem = Form.Item;

const OutStandFilterForm = Form.create()((props) => {
  const { formItemLayout, dateFormat } = props;
  return (
    <Form className={styles.outStandFilter}>
      <Row className={styles.outStandRow}>
        <Col span={9}>
          <FormItem
            className={styles.outStandFormItem}
            label="查找"
            {...formItemLayout}
          >
            <Input />
          </FormItem>
        </Col>
        <Col span={9}>
          <FormItem
            className={styles.outStandFormItem}
            label="日期"
            {...formItemLayout}
          >
            <RangePicker
              defaultValue={[moment('2018/01/01', dateFormat), moment('2018/02/11', dateFormat)]}
              format={dateFormat}
            />
          </FormItem>
        </Col>
        <Col span={2}>
          <FormItem className={styles.outStandFormItem}>
            <Button>查找</Button>
          </FormItem>
        </Col>
        <Col span={3}>
          <FormItem className={styles.outStandFormItem}>
            <Checkbox>快速筛选</Checkbox>
          </FormItem>
        </Col>
      </Row>
    </Form>
  );
});

class OutStandFilterComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      componentName: props.componentName,
      dateFormat: commonFunc.getDateFormat(props.app.systemData),
    };
  }

  componentWillReceiveProps(nextProps) {
    const { systemData } = nextProps.app;
    const dateFormat = commonFunc.getDateFormat(systemData);
    this.setState({ dateFormat });
  }

  render() {
    const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 17 } };
    return (
      <OutStandFilterForm
        {...this.state}
        formItemLayout={formItemLayout}
      />
    );
  }
}

export default OutStandFilterComponent;
